<!--
 * 左右切换器
 * @作者: 陈老师儿~
 * @手机: 18560000860
 -->
<template>
    <view class="pure-prev-next" :class="classes" :style="styles">
        <view class="pure-prev-next-arrow pure-prev-arrow" :class="isDisabledPrev ? disabledClass : ''" :hover-class="hoverClass" @tap.stop="handlePrev">
            <pure-icon :name="prevIcon"></pure-icon>
        </view>
        <view class="pure-prev-next-arrow pure-next-arrow" :class="isDisabledNext ? disabledClass : ''" :hover-class="hoverClass" @tap.stop="handleNext">
            <pure-icon :name="nextIcon"></pure-icon>
        </view>
    </view>
</template>

<script>
    import props from "./props.js";
    export default {
        options: {
            // 将自定义节点设置成虚拟的
            // 头条、飞书：因为合并后丢失事件和 'provide/inject'
            // 京东：因为合并后不能合并外层 'class'
            // 百度：因为合并后会在控制台疯狂报警告
            // #ifndef MP-TOUTIAO || MP-LARK || MP-JD || MP-BAIDU
            virtualHost: true,
            // #endif

            // 组件样式隔离
            styleIsolation: "apply-shared",

            // 允许使用多个插槽
            multipleSlots: true,
        },
        props: props,
        emits: ["prev", "next"],
        computed: {
            // classes
            classes() {
                const classes = [];
                return classes;
            },

            // styles
            styles() {
                const styles = [];
                return styles;
            },

            // 是否禁用左箭头
            isDisabledPrev() {
                // 用户设置了是否禁用
                if (this.prevDisabled !== "auto") return this.prevDisabled;

                // 没有设置禁用，自动计算
                // 如果是循环的，永远不禁用
                if (this.loop) return false;

                // 如果不是循环的，当前是第 0 个，禁用
                return this.current <= 0;
            },

            // 是否禁用右箭头
            isDisabledNext() {
                // 用户设置了是否禁用
                if (this.nextDisabled !== "auto") return this.nextDisabled;

                // 没有设置禁用，自动计算
                // 如果是循环的，永远不禁用
                if (this.loop) return false;

                // 如果不是循环的，当前是最后一个，禁用
                return this.current >= this.count - 1;
            },
        },
        methods: {
            // 上
            handlePrev() {
                if (this.isDisabledPrev) return;
                this.$emit("prev", this.current - 1);
            },

            // 下
            handleNext() {
                if (this.isDisabledNext) return;
                this.$emit("next", this.current + 1);
            },
        },
    };
</script>

<style scoped>
    @import "./style.css";
</style>
